<template>
  <g class="text-mark">
    <text-lable
      v-if="hasArrow"
      :disabled="disabled"
      :x="cx"
      :y="labelY"
      :text="mark.text"
      :type="mark.type"
      :bgColor="bgColor"
      :fgColor="fgColor"
      :fontSize="labelFontSize"
      :rowStart="rowStart"
      :rowEnd="rowEnd"
      :id="mark.id"
      :entityText="mark.entityText"
      :status="status"
    ></text-lable>
    <!-- <brackets
      :position="mark.position"
      :width="mark.width"
      :height="bracketsHeight"
      :x="mark.x"
      :y="bracketsY"
      :cx="cx"
      :stroke="fgColor"
      :hasArrow="hasArrow"
    ></brackets> -->
    <rect
      rx="2"
      ry="2"
      :x="mark.x - 1"
      :y="y - 2"
      :width="mark.width + 2"
      :height="fontSize + 4"
      :fill="fill"
      stroke="#0887FF"
      stroke-width="2"
    />
  </g>
</template>

<script>
import Brackets from "./Brackets";
import TextLable from "./TextLable";

export default {
  components: {
    Brackets,
    TextLable
  },

  props: {
    mark: Object,
    fontSize: Number,
    labelFontSize: Number,
    fill: String,
    levelHeight: Number,
    entityTypesMap: Object,
    rowStart: Number,
    rowEnd: Number,
    status: String,
    disabled: Boolean
  },

  data() {
    return {
      bracketsHeight: 8
    };
  },

  computed: {
    y() {
      return this.mark.y - this.fontSize + this.fontSize * 0.15;
    },
    bracketsY() {
      // 每高一级上移一个层高
      return (
        this.y -
        this.bracketsHeight -
        2 -
        this.levelHeight * (this.mark.level - 1)
      );
    },
    labelY() {
      return this.bracketsY - this.bracketsHeight;
    },
    cx() {
      return typeof this.mark.cx === "number"
        ? this.mark.cx
        : this.mark.x + this.mark.width / 2;
    },
    hasArrow() {
      return this.cx <= this.mark.x + this.mark.width && this.cx > this.mark.x;
    },
    fgColor() {
      return this.entityTypesMap[this.mark.type].fgColor;
    },
    bgColor() {
      return this.entityTypesMap[this.mark.type].fgColor;
    }
  }
};
</script>

<style>
</style>